<template>
  <div class="hello">
    <div class="turntable-wrap">
      <div class="turntable-bg">
        <div class="light"></div>
        <div class="pointer"></div>
        <div class="btn-start" @click="gameStart"></div>
        <div class="turntable-prize" ref="turntable">
          <ul class="prize" v-if="prizeList && prizeList.length">
            <li v-for="(item, index) in prizeList" :key="index">
              <div class="li-main">

                <img class="p-img" :src="item.imgUrl" />
                <p class="p-name">{{item.name}}</p>
                <p class="p-price">￥{{item.price}}</p>
              </div>

            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      //奖品列表
      prizeList:[],

      myPrize:{}, //抽中的奖品
      isRunning: false, //转盘是否开始抽奖

      //中奖列表
      joinList:[
        {studentAccount:'131****5328',prizeName:'拉杆箱'},
        {studentAccount:'121****5328',prizeName:'彩绘套装'},
        {studentAccount:'151****5328',prizeName:'小米护眼灯'},
        {studentAccount:'161****5328',prizeName:'绘本两个'},
      ]
    }
  },
  methods:{
    //点击抽奖按钮
    gameStart () {
      let that = this;
      if (that.prizeList && !that.prizeList.length) {
        return
      }
      if (that.isRunning) {
        return
      }
      that.startRun(); //转盘转动
    },

    //具体的抽奖操作
    startRun () {
      let that = this;
      that.isRunning = true

      // 1.转盘匀速转动
      let transformDeg = this.$refs.turntable.style[transformJs]
      let deg = transformDeg.match(/([-]?\d*)deg/) ? transformDeg.match(/([-]?\d*)deg/)[1] : 0
      deg = parseInt(deg)

      let interval = setInterval(() => {
        deg += 2
        deg = deg % 360
        that.$refs.turntable.style[transformJs] = `rotate(${deg}deg)`
      }, 1)

      //2.后台获取抽奖结果
      let randomRes = that.myPrize;

      clearInterval(interval)

      // 3.计算转动角度
      let equallyDeg = 360/that.prizeList.length ; //每个奖品平均占用的角度
      transformDeg = this.$refs.turntable.style[transformJs]
      let lastDeg = transformDeg.match(/([-]?\d*)deg/) ? transformDeg.match(/([-]?\d*)deg/)[1] : 0
      lastDeg = parseInt(lastDeg)

      let finallyDeg = (randomRes.idx+1) * (-equallyDeg) + 360 * 4 + equallyDeg; //debugger  idx+1 equallyDeg之前是60
      this.$refs.turntable.style[transformJs] = `rotate(${finallyDeg}deg)`

      let transTime = parseFloat((finallyDeg - lastDeg) / 360).toFixed(1)

      this.$refs.turntable.style[transition] = `${transformCss} ${transTime}s ease-out`
      // 4. 转动结束后执行
      let runEnd = () => {
        this.$refs.turntable.style[transition] = `${transformCss} 0s`
        let transformDeg = this.$refs.turntable.style[transformJs]
        let deg = transformDeg.match(/([-]?\d*)deg/) ? transformDeg.match(/([-]?\d*)deg/)[1] : 0
        deg = parseInt(deg)
        deg = deg % 360
        this.$refs.turntable.style[transformJs] = `rotate(${deg}deg)`


        // 5,  本地测试不同奖品个数 抽奖成功后。
          setTimeout(function () {
            that.isRunning = false
            that.$refs.turntable.removeEventListener(transitionend, runEnd)
            console.log('本地测试 中奖,停止旋转,',that.myPrize)
          },1000)

        // 5. 显示中奖结果 并更新滚动记录--调取即可欧获取
//        that.ifShowPrize = true;
//        setTimeout(function () {
//          that.getJoinedList();
//          that.isRunning = false
//          that.$refs.turntable.removeEventListener(transitionend, runEnd)
//
//        },1000)
      }

      that.$refs.turntable.addEventListener(transitionend, runEnd)
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped rel="stylesheet/scss">
  .wrap{
    width: 100%;
    height: 100%;
  }
  .turntable-wrap {
    /*position: fixed;*/
    /*bottom: 63px;*/
    position: relative;
    z-index: 2;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

    .turntable-bg {
      position: absolute;
      top:0;
      left: 0;
      right: 0;
      z-index: 2;
      margin: 0 auto;
      width: 291px;
      height: 290px;
      background: url('https://oss.ziyue.cn/common/active/turntable_bg.png') no-repeat 100% 100%;
      background-size: contain;

      .light {
        position: absolute;
        top: -3px;
        left: 12px;
        width: 269px;
        height: 267px;
        margin: auto;

        background-repeat: no-repeat;
        background-size: 100% 100%;

        animation: changeLight .5s linear infinite;
      }

      .pointer {
        position: absolute;
        top: -6px;
        left: 50%;
        z-index: 1;
        width: 54px;
        height: 51px;
        margin-left: -27px;
        background: url('https://oss.ziyue.cn/common/active/turntable_pointer.png') no-repeat 100% 100%;
        background-size: contain;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .btn-start {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 86px;
        height: 86px;
        margin-left: -43px;
        margin-top: -53px;
        background: url('https://oss.ziyue.cn/common/active/turntable_btn.png') no-repeat 100% 100%;
        background-size: contain;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent; // 点击无阴影
      }
      .turntable-prize {
        position: absolute;
        top: 27px;
        left: 42px;
        width: 208px;
        height: 208px;
        transform: rotate(0deg);
        background: url('https://oss.ziyue.cn/common/active/turntable_inner.png') no-repeat 100% 100%;
        background-size: contain;

        //.prize 默认的6个奖品
        .prize {
          position: absolute;
          top: 20px;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 160px;
          height: 160px;
          transform: rotate(-15deg);
          li {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            color: #000;
            text-align: center;
            line-height: 80px;
            transform-origin: right bottom;
            &:nth-child(1) {
              transform: rotate(60deg);
            }
            &:nth-child(2) {
              transform: rotate(120deg);
            }
            &:nth-child(3) {
              transform: rotate(180deg);
            }
            &:nth-child(4) {
              transform: rotate(240deg);
            }
            &:nth-child(5) {
              transform: rotate(300deg);
            }
            &:nth-child(6) {
              transform: rotate(360deg);
            }
            .li-main {
              transform: rotate(-45deg);

              font-size: 8px;
              color: #A2430E;
              line-height: 10px;
              text-align: center;
              width: 100%;
              height: 100%;
              margin-top: 0;
              margin-left: 0;

              .p-img {
                display: block;
                width: 32px;
                height: 32px;
                border: 0;
                margin: 0 auto;
              }
              .p-name {
                padding-bottom: 2px;
              }
              .p-price {

              }
            }

          }
        }

      }

      .turntable-prize_4{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_4.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_4{
          transform: rotate(-45deg);
          li{

            &:nth-child(1) {
              transform: rotate(90deg);
            }
            &:nth-child(2) {
              transform: rotate(180deg);
            }
            &:nth-child(3) {
              transform: rotate(270deg);
            }
            &:nth-child(4) {
              transform: rotate(360deg);
            }

          }
        }
      }
      .turntable-prize_5{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_5.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_5{
          transform: rotate(-27deg);
          li{

            &:nth-child(1) {
              transform: rotate(72deg);
            }
            &:nth-child(2) {
              transform: rotate(144deg);
            }
            &:nth-child(3) {
              transform: rotate(216deg);
            }
            &:nth-child(4) {
              transform: rotate(288deg);
            }
            &:nth-child(5) {
              transform: rotate(360deg);
            }

          }
        }
      }
      .turntable-prize_8{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_8.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_8{
          transform: rotate(-2deg);
          li{

            &:nth-child(1) {
              transform: rotate(45deg);
            }
            &:nth-child(2) {
              transform: rotate(90deg);
            }
            &:nth-child(3) {
              transform: rotate(135deg);
            }
            &:nth-child(4) {
              transform: rotate(180deg);
            }
            &:nth-child(5) {
              transform: rotate(225deg);
            }
            &:nth-child(6) {
              transform: rotate(270deg);
            }
            &:nth-child(7) {
              transform: rotate(315deg);
            }
            &:nth-child(8) {
              transform: rotate(360deg);
            }

          }
        }
      }
      .turntable-prize_9{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_9.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_9{
          transform: rotate(4deg);
          li{

            &:nth-child(1) {
              transform: rotate(40deg);
            }
            &:nth-child(2) {
              transform: rotate(80deg);
            }
            &:nth-child(3) {
              transform: rotate(120deg);
            }
            &:nth-child(4) {
              transform: rotate(160deg);
            }
            &:nth-child(5) {
              transform: rotate(200deg);
            }
            &:nth-child(6) {
              transform: rotate(240deg);
            }
            &:nth-child(7) {
              transform: rotate(280deg);
            }
            &:nth-child(8) {
              transform: rotate(320deg);
            }
            &:nth-child(9) {
              transform: rotate(360deg);
            }

          }
        }
      }
    }

  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes changeLight {
    0% {
      background-image: url(https://oss.ziyue.cn/common/active/turntable_light1.png);
    }
    100% {
      background-image: url(https://oss.ziyue.cn/common/active/turntable_light2.png);
    }
  }
</style>
